import *as echarts from 'echarts'
import china from '../assets/json/china.json'
export default {
    /* echarts挂载到Vue全局 */
    install: app => {
        app.config.globalProperties.$line = (element, data) => {
            // 加载 ecahrts 图标
            var mychart = echarts.init(document.getElementById(element))
            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['隧道增加数量', '地质预测数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: data
            }
            mychart.setOption(option)
        },
        app.config.globalProperties.$zhu = (element, data) => {
                // 加载 ecahrts 图标
                var mychart = echarts.init(document.getElementById(element))
                const option = {
                    title: [
                        {
                            text: '柱状图'
                        }
                    ],
                    polar: {
                        radius: [30, '80%']
                    },
                    angleAxis: {
                        max: 4,
                        startAngle: 75
                    },
                    radiusAxis: {
                        type: 'category',
                        data: ['a', 'b', 'c', 'd']
                    },
                    tooltip: {},
                    series: {
                        type: 'bar',
                        data: [2, 1.2, 2.4, 3.6],
                        coordinateSystem: 'polar',
                        label: {
                            show: true,
                            position: 'middle',
                            formatter: '{b}: {c}'
                        }
                    }
                }
                mychart.setOption(option)
        },
        app.config.globalProperties.$bing = (element, data) => {
                // 加载 ecahrts 图标
                var mychart = echarts.init(document.getElementById(element))
                const option = {
                    title: {
                        text: '饼状图'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                }
                mychart.setOption(option)
        },
        app.config.globalProperties.$dian = (element, data) => {
                // 加载 ecahrts 图标
                var mychart = echarts.init(document.getElementById(element))
                const option = {
                    title:{text:'散点图'},
                    xAxis: {},
                    yAxis: {},
                    series: [
                        {
                            symbolSize: 20,
                            data: [
                                [10.0, 8.04],
                                [8.07, 6.95],
                                [13.0, 7.58],
                                [9.05, 8.81],
                                [11.0, 8.33],
                                [14.0, 7.66],
                                [13.4, 6.81],
                                [10.0, 6.33],
                                [14.0, 8.96],
                                [12.5, 6.82],
                                [9.15, 7.2],
                                [11.5, 7.2],
                                [3.03, 4.23],
                                [12.2, 7.83],
                                [2.02, 4.47],
                                [1.05, 3.33],
                                [4.05, 4.96],
                                [6.03, 7.24],
                                [12.0, 6.26],
                                [12.0, 8.84],
                                [7.08, 5.82],
                                [5.02, 5.68]
                            ],
                            type: 'scatter'
                        }
                    ]
                }
                mychart.setOption(option)
        },
        app.config.globalProperties.$china = (element, data) => {
            var mychart = echarts.init(document.getElementById(element))
            echarts.registerMap('china',china)
            const option={
                    // 鼠标点击弹窗
                    tooltip:{
                        triggerOn:"click", // 点击触发
                        enterable:true  // 是否出现弹框
                    },
                    visualMap:{
                        origin:"vertical",
                        type:"piecewise",
                        pieces:[
                            {min:0,max:0,color:"#fff"},
                            {min:0,max:10,color:"#fdfdcf"},
                            {min:10,max:20,color:"#fe9e83"},
                            {min:20,max:30,color:"#e55a4e"},
                            {min:30,max:40,color:"#4f070d"},
                            {min:40,max:100,color:"#ff0000"},
                        ]
                    },
                    series:[{
                        name:"中国地图",
                        type:"map",
                        map:"china",
                        roam:false, // 鼠标滚轮是否可以缩放
                        zoom:1.2, // 默认地图的倍数
                        label:{
                            show:true, // 是否显示地图上的文本信息
                            fontSize:8
                        },
                        itemStyle:{
                            areaColor:"rgba(255,255,255,1)",
                            borderColor:"rgba(0,0,0,0.2)"
                        },
                        data:[
                            {name:"内蒙古",value:10},
                            {name:"黑龙江",value:20},
                            {name:"山东",value:30},
                            {name:"河南",value:40}
                        ]
                    }]
            }
            mychart.setOption(option)
        }
    }
}